<template>
<article class="page page-atbash-cipher container">
	<h4 class="text-center">替代密码(埃特巴什码)</h4>
	<form class="content">
		<fieldset>
			<legend>加密/解密</legend>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">原 文</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model.trim="deFormData.cipher" placeholder="请输入原文">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">操 作</label>
				<div class="col-9">
					<x-button type="primary" block @click="decrypt">加密/解密</x-button>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">结 果</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="deFormData.origin" readonly>
				</div>
			</div>
		</fieldset>
	</form>
</article>
</template>

<script>
export default {
	name: 'atbash-cipher',
	data () {
		return {
			charStr1: 'abcdefghijklmnopqrstuvwxyz',
			charStr2: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),
			deFormData: {
				origin: '',
				cipher: '',
			},
		}
	},
	methods: {
		// 解密
		decrypt () {
			this.$set(this.deFormData, 'origin', '')
			if (!this.deFormData.cipher) {
				this.$toast('请输入要解密的字符串')
				return
			}
			let len = this.deFormData.cipher.length
			let result = ''
			for (let i = 0; i < len; i++) {
				let v = this.deFormData.cipher[i] || ''
				let index = this.charStr1.indexOf(v.toLowerCase())
				if (index === -1) {
					result += v
				} else {
					result += this.charStr2[index]
				}
			}
			this.$set(this.deFormData, 'origin', result)
		},
	}
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-atbash-cipher {
	display: flex;
	flex-direction: column;
	.content {
		height: 0;
		flex-grow: 1;
		overflow: hidden auto;
		.col-form-label {
			text-align: center;
		}
		fieldset {
			& + fieldset {
				margin-top: 1em;
			}
		}
	}
}
</style>
